<template>
  <div class="loginLog">
    <div class="top">
      <div class="block">
        <span class="demonstration">选择日期：</span>
        <el-date-picker
          v-model="timeValue"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime"
          :disabled-date="disabledDate"
          @change="handle_time"
        />
      </div>
    </div>
    <div class="cont">
      <el-table v-loading="loading" :data="logData" border style="height: 100%">
        <el-table-column
          type="index"
          :index="
            (index) => {
              return index + 1 + (pageData.page - 1) * pageData.size;
            }
          "
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column prop="userInfo" label="用户名称" />
        <el-table-column prop="ip" label="ip地址" />
        <el-table-column prop="createTime" label="操作时间" />
      </el-table>
      <el-pagination
        style="margin: 10px"
        v-model:current-page="pageData.page"
        v-model:page-size="pageData.size"
        :page-sizes="[100, 200, 500, 1000]"
        layout="->,slot, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @change="handle_page"
      >
        <div class="total">共{{ pageData.total }}条</div>
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { getLog } from "@/api/basic";
import { onMounted, reactive, ref } from "vue";

const loading = ref(false);
const timeValue = ref([]);
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date()];
const pageData = reactive({
  page: 1,
  size: 100,
  total: 0,
});
const logData = ref([]);

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const handle_time = (data) => {
  get_loginLog();
};

const handle_page = () => {
  get_loginLog();
};

let time = ref(null);
const get_loginLog = async () => {
  loading.value = true;
  const res = await getLog({
    pageNum: pageData.page,
    pageSize: pageData.size,
    startTime: timeValue.value[0],
    endTime: timeValue.value[1],
    type: 1,
  });
  time.value = setTimeout(() => {
    loading.value = false;
  }, 5000);
  if (res.code === 200) {
    clearTimeout(time.value); // 清除定时器
    time.value = null;
    loading.value = false;
    logData.value = res.data.records;
    pageData.total = res.data.total;
  }
};

onMounted(() => {
  get_loginLog();
});
</script>

<style lang="scss" scoped>
.loginLog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .top {
    width: 100%;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  .cont {
    flex: 1;
    padding: 10px;
    background: #fff;
  }
}

.el-table {
  max-height: 650px;
}
</style>